<template>
	<div class="role-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
		<div class="top">
			<span>角色名: </span>
			<el-input v-model="searchInfo.roleName" placeholder="角色名" size="small" clearable style="width: 120px"></el-input>
			<span>角色代码: </span>
			<el-input v-model="searchInfo.roleCode" placeholder="角色代码" size="small" clearable style="width: 120px"></el-input>
			<span>角色状态: </span>
			<el-select v-model="searchInfo.roleState" placeholder="角色状态" size="small" style="width: 120px">
				<el-option label="禁用" :value="0">禁用</el-option>
				<el-option label="启用" :value="1">启用</el-option>
			</el-select>
			<el-button type="primary" style="margin-left: 30px; width: 100px" icon="el-icon-search" @click="handleQuery">查询</el-button>
			<el-button icon="el-icon-search" style="margin-left: 30px; width: 100px" size="small" @click="reset">重 置</el-button>
		</div>
		<div class="btn-div">
			<el-button type="primary" icon="el-icon-plus" @click="isAddShow = true">添加角色</el-button>
			<el-button type="warning" icon="el-icon-upload2" @click="exportClick">导出数据</el-button>
		</div>
		<div class="talb_div">
			<el-table :data="dataList" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50"> </el-table-column>
				<el-table-column prop="roleId" label="角色ID" width="50"> </el-table-column>
				<el-table-column prop="roleName" label="角色名" width="180"> </el-table-column>
				<el-table-column prop="roleDesc" label="角色描述" width="180"> </el-table-column>
				<el-table-column prop="roleCode" label="角色代码" width="200"> </el-table-column>
				<el-table-column prop="roleState" label="状态" width="180">
					<!-- <template slot-scope="scope">{{ scope.row.userState == 1 ? '启用' : '禁用' }}</template> -->
					<template #default="scope">{{ scope.row.roleState == 1 ? '启用' : '禁用' }}</template>
				</el-table-column>
				<el-table-column prop="getCode" label="创建人" width="180"> </el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
				<el-table-column label="操作" width="500"
					><template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" size="small" type="primary" icon="el-icon-edit" circle></el-button>
						<el-button @click="handleDelete(scope.row)" size="small" type="danger" icon="el-icon-delete" circle></el-button>
						<el-button @click="handleDisabled(scope.row)" size="small" type="warning">{{ scope.row.roleState == 0 ? '启用' : '禁用' }}</el-button>
						<template v-if="scope.row.roleState == 1">
							<el-button size="small" type="primary" @click="handleAuthClick(scope)">更改权限</el-button>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page_nation">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-sizes="[10, 20, 30, pageInfo.totalNum]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.totalNum"
			>
			</el-pagination>
		</div>

		<!-- 弹窗 -->
		<el-dialog title="添加用户" :visible.sync="isAddShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form :model="formInfo" :rules="rules" ref="form" label-width="100px">
					<el-form-item label="名称" prop="roleName" size="small">
						<el-input v-model="formInfo.roleName"></el-input>
					</el-form-item>
					<el-form-item label="描述" prop="roleDesc" size="small">
						<el-input v-model="formInfo.roleDesc"></el-input>
					</el-form-item>
					<el-form-item label="代码" prop="roleId" size="small">
						<el-input v-model="formInfo.roleId"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isAddShow = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('form')">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog title="修改用户信息" :visible.sync="isEditShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form label-width="100px">
					<el-form-item label="名称" size="small">
						<el-input v-model="formEditInfo.roleName"></el-input>
					</el-form-item>
					<el-form-item label="描述" size="small">
						<el-input v-model="formEditInfo.roleDesc"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isEditShow = false">取 消</el-button>
					<el-button type="primary" @click="handleEditEnter">确 定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { exportExcel } from 'excel-tools/dist/main.es.js';
export default {
	data() {
		return {
			loading: false,
			exportData: [],
			searchInfo: {
				roleCode: '',
				roleName: '',
				roleState: '',
			},
			pageInfo: {
				pageSize: 10,
				pageNum: 1,
				totalNum: 0,
			},
			rolelist: [],
			dataList: [],
			formInfo: {
				roleDesc: '',
				roleCode: '',
				roleName: '',
			},
			formEditInfo: {
				roleDesc: '',
				roleId: 0,
				roleName: '',
			},
			form: {
				roleDesc: '',
				roleCode: '',
				roleName: '',
			},
			rules: {
				roleName: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
				roleId: [{ required: true, message: '请输入角色代码', trigger: 'blur' }],
			},
			isAddShow: false,
			isEditShow: false,
		};
	},
	methods: {
		//查询
		handleQuery() {
			if (this.searchInfo.roleCode.length || this.searchInfo.roleName.length || this.searchInfo.roleState.length) {
				this.getList();
			} else {
				this.$message.warning('筛选条件不能为空');
			}
		},
		reset() {
			this.searchInfo = {
				roleCode: '',
				roleName: '',
				roleState: '',
			};
			this.getList();
		},
		getList() {
			this.loading = true;
			this.$http
				.get('role/role-page-list', {
					params: {
						...this.searchInfo,
						...this.pageInfo,
					},
				})
				.then((res) => {
					const {
						code,
						data: { pageSize: one, pageNum, resultList, totalNum },
					} = res;
					if (code == 200) {
						this.dataList = resultList;
						this.pageInfo.totalNum = totalNum;
						this.pageInfo.pageSize = one;
						this.pageInfo.pageNum = pageNum;
						console.log('data', res.data);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//获取选取框
		handleSelectionChange(selection, row) {
			this.exportData = [...selection];
			this.exportData.forEach((item) => {
				this.$set(item, 'roleState', item.roleState == 0 ? '禁用' : '启用');
			});
			console.log(selection);
		},
		//用户状态
		handleDisabled(row) {
			this.$http
				.put('/role/role-state-update', {
					...row,
					roleState: row.roleState == 1 ? '0' : '1',
				})
				.then((res) => {
					if (res.code == 200) {
						this.getList();
						this.$message.success('修改成功');
					}
				});
		},
		//修改用户
		handleEdit(row) {
			this.formEditInfo.roleId = row.roleId;
			this.formEditInfo.roleName = row.roleName;
			this.formEditInfo.roleDesc = row.roleDesc;
			this.isEditShow = true;
		},
		handleEditEnter() {
			this.$http.put('/role/role-update', this.formEditInfo).then((res) => {
				const { code, data } = res;
				if (code == 200) {
					this.isEditShow = false;
					this.getList();
					this.$message.success('添加成功');
				}
			});
		},
		//删除用户
		handleDelete(row) {
			// const userId = row.userId;
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.$http.delete(`/role/role-delete/${row.roleId}`).then((res) => {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.getList();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		//页码
		handleSizeChange(size) {
			this.pageInfo.pageSize = size;
			this.getList();
		},
		handleCurrentChange(current) {
			this.pageInfo.pageNum = current;
			this.getList();
		},
		//添加用户
		submitForm(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.$http.post('/role/role-add', this.formInfo).then((res) => {
						const { code, data } = res;
						if (code == 200) {
							this.isAddShow = false;
							this.getList();
							this.$message.success('添加成功');
						}
					});
				} else {
					console.log('验证失败');
					return false;
				}
			});
		},
		//导出表格
		exportClick() {
			exportExcel({
				fileName: '用户列表',
				header: [
					{
						key: 'roleId',
						header: '角色ID',
						width: 25,
					},
					{
						key: 'roleName',
						header: '角色名',
						width: 24,
					},
					{
						key: 'roleDesc',
						header: '角色描述',
						width: 23,
					},
					{
						key: 'roleCode',
						header: '角色代码',
						width: 25,
					},
					{
						key: 'roleState',
						header: '状态',
						width: 25,
					},
					{
						key: 'getCode',
						header: '创建人',
						width: 24,
					},
					{
						key: 'createTime',
						header: '创建时间',
						width: 23,
					},
				],
				content: this.exportData, // 导出的数据
			});
		},
	},
	created() {
		this.getList();
	},
};
</script>

<style lang="scss" scoped></style>
